<template>
	<view class="info">
		
		<view class="banner">
			<!-- banner -->
			<swiper class="swiper-info" interval="2000" duration="1500" circular="true" indicator-dots="true">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<image :src="item.pic" mode=""></image>
				</swiper-item>
			</swiper>
			
			<!-- 收藏小图标 -->
			<view class="collect">
				<view class="icon"></view>
			</view>
		</view>
		
		<!-- 标题 -->
		<view class="title-block">
			<view class="container">
				<view class="price">
					¥
					<view class="money">{{productInfo.price}}</view>
					.00
				</view>
				<!-- <view class="price disabled">
					¥
					<view class="money">{{productInfo.price}}</view>
					.00
				</view> -->
				<view class="promotion-type">没有促销使用原价</view>
			</view>
			<view class="detail_title">{{productInfo.name}}</view>
			<view class="detail_desc">{{productInfo.detailDesc}}</view>
		</view>
		<!-- //内容 -->
		<view class="content" v-html="productInfo.detailMobileHtml">
			
		</view>
		<!-- 底部导航栏 -->
		<view class="goods-nav">
			<!-- 小图标 -->
			<view class="icon"></view>
			<!-- 按钮盒子 -->
			<view class="btns">
				<view class="cart" @tap="showCarMask">添加至购物车</view>
				<view class="buy" @tap="showBuyMask">立即购买</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<uni-popup ref="popup" type="center" class="mask">
			<view class="card">
				<!-- 关闭按钮 -->
				<view class="close" @click="closeMask">
					<uni-icons type="close" size="25"></uni-icons>
				</view>
				<!-- 图片 -->
				<image :src="bannerList[current].pic" class="img" v-if="bannerList.length!=0"></image>
				<!-- 商品名称 -->
				<view class="title">{{productInfo.name}}</view>
				<!-- 库存数量 -->
				<view class="sku-count">库存数量：{{productInfo.lowStock}}</view>
				<!-- 商品选择盒子 -->
				<view class="goods-choose">
					<view class="common-title">商品选择</view>
					<view class="area">
						<view class="item" :class="current == index ? 'active' : ''" v-for="(item,index) in bannerList" :key="item.id" @tap="chooseGoods(item.id,index)">
							<view v-for="ele in item.spData" :key="ele.value" style="margin-right: 10rpx;">
								{{ ele.key }} : {{ ele.value }}
							</view>
						</view>
					</view>
				</view>
				<!-- 特色服务 -->
				<view class="goods-choose">
					<view class="common-title">特色服务</view>
					<view class="area">
						<view class="item" style="padding-left: 30rpx">送货上门</view>
						<view class="item" style="padding-left: 30rpx">上门安装</view>
					</view>
				</view>
				<!-- 购买数量 -->
				<view class="buy-count-area">
					<view class="common-title">购买数量</view>
					<!-- 计数器 -->
					<view class="buy-count-steps">
						<view class="step-reduce" @tap="productQuantity > 1 ? productQuantity-- : ''">-</view>
						<view class="step-text">{{productQuantity}}</view>
						<view class="step-add"  @tap="productQuantity++">+</view>
					</view>
				</view>
				<!-- 确定按钮 -->
				<view class="btn-buy" @tap="confirmBuy">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { productDetail , addPreOrder , addCart } from "@/api/home/info/info.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import mix from "../../../mixins/mixins.js";
	export default {
		data() {
			return {
				// banner图列表
				bannerList:[],
				//商品信息
				productInfo:{},
				current:0,
				// 商品id
				// productId:'',
				// 商品skuId
				productSkuId:'',
				// 购买数量
				productQuantity:1,
				// 购物车cartId 
				cartId:'',
				// 判断是购物车还是立即购买,购物车type为car，立即购买type为buy
				type:''
			};
		},
		components: {
		    uniPopup,uniIcons
		},
		mixins:[mix],	
		methods:{
			init(id){
				productDetail(id).then(res=>{
					console.log(res);
					res.data.product.skuList.forEach(ele =>{
						ele.spData = JSON.parse(ele.spData)
					});
					this.bannerList = res.data.product.skuList;
					this.productInfo = res.data.product;
				})
			},
			// 弹出购物车遮罩层
			showCarMask(){
				this.$refs.popup.open();
				this.type = 'car';
			},
			// 弹出购买遮罩层
			showBuyMask(){
				this.$refs.popup.open();
				this.type = 'buy';
			},
			// 关闭遮罩层
			closeMask(){
				this.$refs.popup.close()
			},
			// 选择商品
			chooseGoods(id,index){
				this.current = index;
				this.productSkuId = id;
			},
			// 点击确定生成确认单
			ajax(){
				if(this.type == 'buy'){
					
					addPreOrder({
					orderItemList:[
						{
						 cartId:'',
						 productId:this.productInfo.id,
						 productQuantity:this.productQuantity,
						 productSkuId:this.productSkuId =='' ? this.bannerList[0].id : this.productSkuId,
						}
					]
				}).then(res=>{
					console.log(res);
					var orderId = res.data.orderId;
					//跳转到订单页， 提示弹窗
					uni.showToast({
					    title: '登陆成功,1秒后跳转至订单页',
					    icon: 'success',
						duration:1000,
						success() {
							setTimeout(function(){
								uni.navigateTo({
									url:`../order/order?orderId=${orderId}`
								})
							},1000)
						}
					});
					
				})
				
				}else {
					addCart({
						productId:this.productInfo.id,
						quantity:this.productQuantity,
						productSkuId:this.productSkuId =='' ? this.bannerList[0].id : this.productSkuId,
					}).then(res=>{
						// console.log(res)
						if(res.success==true){
							uni.showToast({
								title:'添加购物车成功',
								duration:1000,
							})
							this.$refs.popup.close();
						}
						
					})
					
				}
				
				
			},
			// mixins混入检测是否登录
			confirmBuy(){
				this.checkLogins(this.ajax);
			}
			
		},
		onLoad(options) {
			this.init(options.id);
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f1ece7;
	}
	 .info {
		 padding-top: var(--status-bar-height);
	 }
	 //轮播盒子
	.banner {
		width: 100%;
		position: relative;
		 .swiper-info {
			 height: 634rpx;
			  image {
				  width: 100%;
				  height: 100%;
			  }
		 }
		 // 收藏小图标
		 .collect {
			 position: absolute;
			 width: 100rpx;
			 height: 100rpx;
			 top: 580rpx;
			 right: 100rpx;
			 background: #354e44;
			 box-shadow: 0 32rpx 48rpx 0 rgba(70,70,70,.2);
			 text-align: center;
			 border-radius: 50%;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			  .icon {
				  width: 60rpx;
				  height: 60rpx;
				  background: url('~@/static/images/icons/collect.png') no-repeat center;
				  background-size: 100% 100%;
			  }
		 }
	}
	//标题
	.title-block {
		box-sizing: border-box;
		padding: 0 68rpx;
		margin-top: 60rpx;
		 .container {
			 display: flex;
			 align-items: baseline;
			 .price {
				 font-size: 32rpx;
				 line-height: 60rpx;
				 color: #f2270c;
				 display: flex;
				 font-family: fantasy;
				 align-items: baseline;
				  .money {
					  font-size: 60rpx;
				  }
			 }
			 .promotion-type {
				     position: relative;
				     display: inline-flex;
				     align-items: center;
				     justify-content: center;
				     line-height: normal;
				     margin-right: 12rpx;
				     padding: 0 12rpx;
				     border: 2rpx solid #ff8373;
				     border-radius: 5rpx;
				     height: 30rpx;
				     color: #f2270c;
				     font-size: 20rpx;
				     color: #fff;
				     background-color: #f2270c;
				     border-color: #f2270c;
				     margin-left: 10rpx;
			 }
		 }
		 .detail_title {
			 color: #262626;
			 overflow: hidden;
			 font-size: 32rpx;
			 font-weight: 700;
		 }
		 .detail_desc {
			 font-size: 24rpx;
			 padding: 36rpx 0 0;
			 line-height: 1.3;
			 color: #666;
		 }
	}
	// 内容
	.content {
		box-sizing: border-box;
		padding: 68rpx;
		overflow: hidden;
		margin-bottom: 120rpx;
		
	}
	//底部导航栏
	.goods-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 88;
		display: flex;
		box-sizing: border-box;
		padding: 0 60rpx;
		justify-content: space-between;
		background-color: #fff;
		align-items: center;
		height: 120rpx;
		// 图标
		 .icon {
			 width: 60rpx;
			 height: 60rpx;
			 background: url('~@/static/images/icons/kf.png') no-repeat 0;
			 background-size: 40rpx 40rpx;
		 }
		 // 按钮
		 .btns {
			 display: flex;
			 height: 100%;
			 justify-content: center;
			 view {
				 width: 238rpx;
				 height: 80rpx;
				 margin-top: 20rpx;
				 font-size: 30rpx;
				 line-height: 80rpx;
				 text-align: center;
			 }
			 .cart {
				  background-color: #e2e2e2;
				  color: #8f8f94;
			 }
			 .buy {
				  background-color: #354e44;
				  color: #fff;
			 }
		 }
	}
	// 遮罩层
	.mask {
		z-index: 99;
	}
	.mask .card {
		width: 628rpx;
		height: 926rpx;
		background: #fff;
		position: relative;
		border-radius: 40rpx;
		padding-top: 0.1rpx;
		// 关闭按钮
		.close {
			position: absolute;
			right: 52rpx;
			top: 30rpx;
			width: 42rpx;
			height: 42rpx;
		}
		// 图片
		.img {
			position: absolute;
			width: 192rpx;
			height: 192rpx;
			left: 62rpx;
			top: -56rpx;
			border-radius: 10rpx;
		}
		// 商品名
		.title {
			font-size: 28rpx;
			color: #3e3e3e;
			margin-left: 284rpx;
			margin-top: 84rpx;
			font-weight: 600;
		}
		// 库存数量
		.sku-count {
			font-size: 24rpx;
			color: #b0b0b0;
			margin-top: 6rpx;
			line-height: 32rpx;
			margin-left: 284rpx;
		}
		// 商品选择盒子
		.goods-choose {
			box-sizing: border-box;
			margin: 28rpx 56rpx;
			padding: 0 8rpx;
			 .common-title {
				 font-size: 28rpx;
				 color: #3e3e3e;
				 height: 40rpx;
				 line-height: 40rpx;
				 letter-spacing: 4rpx;
				 font-weight: 600;
			 }
			 .area {
				 // display: flex;
				 // flex-direction: column;
				 // height: 170rpx;
				 width: 100%;
				  .item {
					  box-sizing: border-box;
					  border: 4rpx solid transparent;
					  display: flex;
					  width: calc(100% - 10px)!important;
					  text-align: left!important;
					  padding-left: 10rpx;
					  height: 60rpx;
					  color: #3e3e3e;
					  font-size: 26rpx;
					  line-height: 60rpx;
					  background: #f2f4f3;
					  border-radius: 20rpx;
					  margin: 10rpx;
				  }
			 }
		}
		.buy-count-area {
			box-sizing: border-box;
			padding: 0 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.common-title {
				font-size: 28rpx;
				color: #3e3e3e;
				line-height: 40rpx;
				letter-spacing: 4rpx;
				font-weight: 600;
			}
			// 计数器
			.buy-count-steps {
				display: flex;
				justify-content: center;
				.step-reduce , .step-add {
					width: 60rpx;
					height: 60rpx;
					background: #f1ece7;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					margin: 0 6rpx;
				}
				.step-text {
					width: 90rpx;
					border-radius: 30rpx;
					height: 60rpx;
					background: #f1ece7;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					margin: 0 6rpx;
				}
			}
		}
		.btn-buy {
			width: 208rpx;
			height: 80rpx;
			background: #354e44;
			border-radius: 28rpx;
			margin: 30rpx auto;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.active {
		border: 4rpx #354e44 solid!important;
	}
	
</style>
